import {
    GetBanner,
    GetMaterialTemplateCategory,
    GetMaterialList,
    SetPlatformModuleViews,
} from "~/api";

export const useContent = () => {
    const isLoading = ref(false);
    const active = ref([0, 0]);
    const tabActive = ref(0);
    const list = ref([]);
    const bannerList = ref([]);
    const categoryList = ref([]);
    const priceSortType = ref("");
    const searchKeyword = ref("");

    const pagination = reactive({
        size: 48,
        page: 1,
    });

    const cate2 = computed(() => {
        let cateItem = categoryList.value.find(
            (item) => item.id == active.value[0]
        );
        return cateItem.child || [];
    });

    const GetBannerList = async (category_id) => {
        const res = await GetBanner({ category_id });
        if (res.code == 200) {
            bannerList.value = res.data;
        }
    };

    const GetCategory = async () => {
        const res = await GetMaterialTemplateCategory();
        if (res.code == 200) {
            categoryList.value = res.data;
            active.value[0] = res.data[0].id;
        }
    };

    const onPageChange = (page) => {
        pagination.page = page;
    };

    const onCateActive = (index, value) => {
        if (index == 0) {
            active.value[1] = 0;
        }
        active.value[index] = value;
        GetList();
    };

    const GetList = async () => {
        isLoading.value = true;
        const res = await GetMaterialList({
            keyword: searchKeyword.value,
            one_category_id: active.value[0],
            two_category_id: active.value[1],
        });
        isLoading.value = false;

        if (res.code == 200) {
            list.value = res.data;
        }
    };

    const onPriceFilter = () => {
        tabActive.value = 6;
        if (priceSortType.value != "asc") {
            priceSortType.value = "asc";
        } else {
            priceSortType.value = "desc";
        }
    };

    const onSearch = (keyword) => {
        let isCate = false;

        // 判断是否属于分类
        if (keyword) {
            for (let item of categoryList.value) {
                if (item.name == keyword) {
                    active.value = [item.id, 0];
                    isCate = true;
                    break;
                } else if (item.child && item.child.length > 0) {
                    for (let item2 of item.child) {
                        if (item2.name == keyword) {
                            active.value = [item.id, item2.id];
                            isCate = true;
                            break;
                        }
                    }
                }
            }

            if (!isCate) {
                searchKeyword.value = keyword;
                active.value[1] = 0;
            } else {
                searchKeyword.value = "";
            }

        } else {
            active.value = [categoryList.value[0].id, 0];
            searchKeyword.value = "";
        }

        GetList();
    };

    watch(tabActive, () => {
        if (tabActive.value != 6) {
            priceSortType.value = "";
        }
    });

    SetPlatformModuleViews({ name: "素材商店" });

    return {
        active,
        tabActive,
        bannerList,
        categoryList,
        pagination,
        cate2,
        isLoading,
        list,
        priceSortType,
        onSearch,
        GetBannerList,
        GetCategory,
        GetList,
        onPageChange,
        onCateActive,
        onPriceFilter,
    };
};
